<template>
  <div id="main" style="width: 800px;height: 500px;margin-left: 1000px;"></div>
  <br>
  <div id="main1" style="width: 800px;height: 500px;margin-top: -500px;"></div>
  <VueEcharts style="width: 1000px;height: 500px;" :option="myChart"></VueEcharts>
  <VueEcharts style="width: 1000px;height: 500px;" :option="myChart1"></VueEcharts>
</template>

<script setup lang="ts">


import axios from 'axios';
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

let myChart:any;
let myChart1:any;
onMounted(()=>{
  SheepTypeBeedReport()
  SheepTypeBeedReport2()
   myChart = echarts.init(document.getElementById('main'));
   myChart1 = echarts.init(document.getElementById('main1'));
})


const data1 = ref([])
const OrderData=ref([])
//羊只类型分组统计(种公)
function SheepTypeBeedReport()
{
  axios.post("http://localhost:5012/api/Report/SheepBeedTypeReport",{
    sheepTypeId:1
  })
  .then(res=>{
    console.log(res);
    OrderData.value=res.data.data
   
  })
}
const data2 = ref([])
const OrderData2=ref([])
//羊只类型分组统计(种母)
function SheepTypeBeedReport2()
{
  axios.post("http://localhost:5012/api/Report/SheepBeedTypeReport",{
    sheepTypeId:2
  })
  .then(res=>{
    console.log(res);
    OrderData2.value=res.data.data
   
  })
}
//种母存栏
watch(OrderData2,(val:any)=>{
  val.forEach((x:any) => {
    data2.value.push({value:x.value,name:x.name});
  });
  console.log(data1.value);
  // 绘制图表
  myChart1.setOption ({
    title: {
    text: '羊只分类统计(种母)',
    subtext: '在线',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend:{
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name:"数量",
      data: data2.value ,
      type: 'pie',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      radius: ['40%', '70%'],
    }
  ],
 
  });

});

watch(OrderData,(val:any)=>{
  val.forEach((x:any) => {
    data1.value.push({value:x.value,name:x.name});
  });
  console.log(data1.value);
  
  
  // 绘制图表
  myChart.setOption ({
    title: {
    text: '羊只分类统计（种公）',
    subtext: '在线',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name:"数量",
      data:  data1.value ,
      type: 'pie',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
  });

});
</script>

<style scoped>

</style>